<template>
    <div class="smart_container_rightBlock_top">
            <div class="smart_searchBlock">
                <div class="smart_searchBlock_border">
                    <span class="smart_searchBlock_allSelect">
                        <span v-for="(_item, _index) in selectAll" 
                              :key="_index"
                              v-if="_item.state == 1">{{_item.text}}</span><i class="line"></i>

                        <div class="smart_searchBlock_SelectPlugin">
                            <div class="li" 
                                 v-for="(_item, _index) in selectAll" 
                                 :key="_index"
                                 @click="handleClickSelect(_index)"
                                 :class="_item.state == 1 ? 'active':''">{{ _item.text }}</div>
                        </div> 
                    </span>
                    <div class="smart_searchBlock_rightText">
                       <input type="text" placeholder="请输入交易记录或需要查询的地址" v-model="addressParms"/>
                       <div class="searchButton" @click="handleGotoAddressInfor"></div>
                    </div>
                    
                </div>
            </div>
            <div class="smart_rightBlock_block">
                <div class="lis"><a href='https://smartx.one' target="_blank">官网</a></div>
                <div class="lis"><a href='https://#' target="_blank">空投</a></div>
                <div class="lis"><a href='https://smartx.one/Whitepaper.pdf' target="_blank">白皮书</a></div>
                <div class="lis"><a href='https://miner.smartx.one' target="_blank">免费SAT</a></div>
                <div class="lis"><a href='https://t.me/smartx_en' target="_blank">加入电报群</a></div>
                <div class="lis">中文</div>
                <div class="lis">Test NetWork</div>
            </div>
     </div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Watch } from "vue-property-decorator";

import { mapGetters, mapActions } from "vuex";

@Component
export default class TopNav extends Vue { 

    /** 用户输入的地址; */
    private addressParms:String = '';
    
    /** 头部筛选下拉框 */
    private selectAll:Array<object> = [{
        text: '全部筛选',
        index: 0,
        state: 1
    },{
        text: '地址',
        index: 1,
        state: 0
    },{
        text: '主板',
        index: 2,
        state: 0
    },{
        text: '交易',
        index: 3,
        state: 0
    }]

    /** 切换下拉框 */
    private handleClickSelect(_index:number){

        let _emtry:Array<object> = [];

        this.selectAll.forEach(_item=>{
           
           if(_index == _item['index']){

              _item['state'] = 1;

           }else{

              _item['state'] = 0;
           }
        });

        this.selectAll = _emtry.concat(this.selectAll);
    }

    /** 跳到对应的钱包地址 */
    private handleGotoAddressInfor():void{

        this.$router.push({ path: '/browser/addressInformation', query:{ 'address': String(this.addressParms)}});
    }
}

</script>

<style lang="scss">
    @import 'topNav';
</style>
